<template>
	<view class="page">
		<topVue title="我的订单"></topVue>
		<view class="subsectionVue padding-row30">
			<u-subsection :list="tabs" :current="current" bg-color="#f5f5f5" active-color="#fff" button-color="#1CC289" @change="tabChange"></u-subsection>
			<u-gap height="20"></u-gap>
			<u-subsection :list="tabsArea" :current="currentArea" bg-color="#f5f5f5" active-color="#fff" button-color="#60A5FA" @change="areaChange"></u-subsection>
		</view>	
		<u-gap height="160"></u-gap>
		<empty text="订单列表为空" v-if="isEmpty"></empty>
		<view class="item margin20 padding30" v-for="(item, index) in list" :key="index">
			<view class="flex-between align-center">
				<view class="label">{{["订单区", "折扣区", "活动区", "积分区"][areaId - 1]}}</view>
				<view class="state" v-if="item.status==0">待支付</view>
				<view class="state" v-if="item.status==10">待发货</view>
				<view class="state" v-if="item.status==20">待收货</view>
				<view class="state" v-if="item.status==30">已完成</view>
				<view class="state" v-if="item.status==40">已取消</view>
			</view>
			<view class="flex align-center margin30" style="border-bottom: 1rpx solid #f5f5f5; padding-bottom: 20rpx;" v-for="(o,i) in item.items" :key="i">
				<view class="picVue">
					<image :src="o.picUrl" style="width: 100%; height: 100%;border-radius: 15rpx;"></image>
				</view>
				<view class="flex-column padding-row20 flex-between w100" style="height: 130rpx">
					<view class="w100 flex-between align-center">
						<view class="name">{{o.spuName}}</view>
						<text style="color: #454545; line-height: 1;">X{{o.count}}</text>
					</view>
					<view class="kg">
						<text style="line-height: 1;padding-right: 20rpx;" v-for="(ver,num) in o.properties" :key="num">{{ ver.valueName }}</text>
					</view>
					<view class="flex-between align-center">
						<view class="price">{{o.price/100}}积分</view>
						<view class="after" v-if="o.afterSaleStatus==10">售后申请中</view>
						<view class="after" v-if="o.afterSaleStatus==20">卖家通过售后申请</view>
						<view class="after" v-if="o.afterSaleStatus==30">待卖家收货</view>
						<view class="after" v-if="o.afterSaleStatus==40">等待平台退款</view>
						<view class="after" v-if="o.afterSaleStatus==61">买家取消售后</view>
						<view class="after" v-if="o.afterSaleStatus==62">卖家拒绝售后申请</view>
						<view class="after" v-if="o.afterSaleStatus==63">卖家拒绝收货"</view>
					</view>
				</view>
			</view>
			<view class="flex-between align-center padding-column20">
				<text style="color: #666; line-height: 1;">订单编号</text>
				<text style="color: #333; font-weight: 600; line-height: 1;">{{item.no}}</text>
			</view>
			<view class="flex-between align-center">
				<text style="color: #666; line-height: 1;">下单时间</text>
				<text style="color: #333; font-weight: 600; line-height: 1;">{{item.createTime | formatTime("YMDHMS")}}</text>
			</view>
			<view class="flex-end align-center margin30">
				<view class="btn" v-if="item.status==0" @click="toPay(item)">支付订单</view>
				<view class="cancelbtn" @click="isCancel=true; oprationId=item.id" v-if="item.status==0">取消订单</view>
				<view class="btn" @click="$tools.route(`./orderDetail_${currentArea+1}`, item.id)">查看详情</view>
				<view class="btn" @click="$tools.route('../expressTrack/expressTrack', item.id)" v-if="item.status==20">查看物流</view>
				<view class="btn" @click="isReceive=true; oprationId=item.id" v-if="item.status==20">确认收货</view>
			</view>
		</view>
		
		<Loading :num="2" v-if="loading"></Loading>
		
		<popup :show="isCancel" text="确认取消该订单?" @cancel="isCancel=false" @confirm="cancelFun"></popup>
		<popup :show="isReceive" text="确认已经收到商品?" @cancel="isReceive=false" @confirm="receiveFun"></popup>
		
		<u-popup v-model="show" mode="bottom">
			<view class="popVue">
				<view class="flex align-center" style="border-bottom: 1rpx solid #f5f5f5; padding-bottom: 20rpx;" v-for="(o,i) in oList" :key="i">
					<view class="picVue">
						<image :src="o.picUrl" style="width: 100%; height: 100%;border-radius: 15rpx;"></image>
					</view>
					<view class="flex-column padding-row20 flex-between flex-1" style="height: 130rpx">
						<view class="w100 flex-between align-center">
							<view class="name">{{o.spuName}}</view>
							<text style="color: #454545; line-height: 1;">X{{o.count}}</text>
						</view>
						<view class="kg">
							<text style="line-height: 1;padding-right: 20rpx;" v-for="(ver,num) in o.properties" :key="num">{{ ver.valueName }}</text>
						</view>
						<view class="price">{{o.price/100}}积分</view>
					</view>
				</view>
				<view class="inpVue margin30">
					<view class="ket">支付方式</view>
					<template v-if="oParentid==1">
						<view class="li flex-between align-center padding-row30 margin20">
							<view class="flex align-center">
								<image src="../../static/selected.png" style="width: 50rpx; height: 50rpx;"></image>
								<text style="color: #1CC289; padding-left: 10rpx; line-height: 1; font-size: 30rpx;">绿色积分支付</text>
							</view>
							<text style="line-height: 1; color: #454545; font-size: 30rpx;">可用绿色积分：{{balanceInfo.greenPoints/100}}</text>
						</view>
					</template>
					<template v-if="oParentid==2 || oParentid==3">
						<view class="li flex-between align-center padding-row30 margin20" :class="{active: pay===0}" @click="changePay(0)">
							<view class="flex align-center">
								<image src="../../static/selected.png" style="width: 50rpx; height: 50rpx;" v-if="pay===0"></image>
								<image src="../../static/select.png" style="width: 50rpx; height: 50rpx;" v-else></image>
								<text style="padding-left: 10rpx; line-height: 1; font-size: 30rpx;" :style="{color:pay===0 ?'#1CC289':'#454545'}">绿色积分支付</text>
							</view>
							<text style="line-height: 1; color: #454545; font-size: 30rpx;">可用绿色积分：{{balanceInfo.greenPoints/100}}</text>
						</view>
						<view class="li flex-between align-center padding-row30 margin20" :class="{active: pay===1}" @click="changePay(1)">
							<view class="flex align-center">
								<image src="../../static/selected.png" style="width: 50rpx; height: 50rpx;" v-if="pay===1"></image>
								<image src="../../static/select.png" style="width: 50rpx; height: 50rpx;" v-else></image>
								<text style="padding-left: 10rpx; line-height: 1; font-size: 30rpx;" :style="{color:pay===1 ?'#1CC289':'#454545'}">支付宝支付</text>
							</view>
						</view>
						<view class="li flex-between align-center padding-row30 margin20" :class="{active: pay===2}" @click="changePay(2)">
							<view class="flex align-center">
								<image src="../../static/selected.png" style="width: 50rpx; height: 50rpx;" v-if="pay===2"></image>
								<image src="../../static/select.png" style="width: 50rpx; height: 50rpx;" v-else></image>
								<text style="padding-left: 10rpx; line-height: 1; font-size: 30rpx;" :style="{color:pay===2 ?'#1CC289':'#454545'}">微信支付</text>
							</view>
						</view>
					</template>
					<template v-if="oprationId==4">
						<view class="li flex-between align-center padding-row30 margin20">
							<view class="flex align-center">
								<image src="../../static/selected.png" style="width: 50rpx; height: 50rpx;"></image>
								<text style="color: #1CC289; padding-left: 10rpx; line-height: 1; font-size: 30rpx;">消费积分支付</text>
							</view>
							<text style="line-height: 1; color: #454545; font-size: 30rpx;">可用消费积分：{{balanceInfo.spendPoints/100}}</text>
						</view>
					</template>
				</view>
				<view class="submit margin40" @click="show=false; isVerify = true">提交订单</view>
			</view>
		</u-popup>
		
		<Verify :show="isVerify" @cancel="isVerify=false" @orderFun="payOrder" ref="verify"></Verify>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				show: false,
				current: 0,
				currentArea: 0,
				tabs: [{name: "全部", status: null}, {name: "待支付", status: 0}, {name: "待发货", status: 10}, {name: "待收货", status: 20}, {name: "已完成", status: 30}, {name: "已取消", status: 40}],
				tabsArea: [{name: "订单区", id: 1}, {name: "折扣区", id: 2}, {name: "活动区", id: 3}, {name: "积分区", id: 4}],
				isCancel: false,
				isReceive: false,
				pageNum: 1,
				pageSize: 10,
				list: [],
				status: null,
				oprationId: "",
				areaId: 1,
				pages: 0,
				isEmpty: false,
				loading: false,
				oList: [],
				oId: "",
				oParentid: "",
				pay: 0,
				payPassword: "",
				isVerify: false,
			}
		},
		
		async onLoad() {
			await this.getList()
		},
		
		computed: {
			...mapState({
				balanceInfo: state => state.balanceInfo,
				user: state=> state.user
			})
		},
		
		onReachBottom() {
			if(this.pageNum===this.pages) return
			this.pageNum++
			this.getList()
		},
		
		methods: {
			// 获取订单列表
			async getList(){
				// console.log("商品区ID",this.areaId)
				// console.log("商品状态", this.status)
				// console.log("分页", this.pageNum)
				this.loading = true
				const result = await this.$request("/app-api/trade/order/page", "GET", {
					status: this.status,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					parendCategoryId: this.areaId
				})
				this.loading = false
				if(result.code===0) {
					this.list = this.list.concat(result.data.list)
					this.pages = Math.ceil(result.data.total/this.pageSize)
					this.isEmpty = this.list.length===0
					console.log("总页数", this.pages)
					console.log("页数", this.pageNum)
					console.log("订单列表", this.list)
				}
			},
			
			
			async toPay(item){
				this.$store.dispatch("getBalance", this.user.id)
				this.payPassword = ""
				const res = await this.$request('/app-api/member/user/check-pay-password', "GET", {})
				if(res.code===0) {
					console.log(res)
					if(res.data) {
						console.log("设置了支付密码")
						this.oId = item.payOrderId
						this.oParentid = item.parendCategoryId
						this.oList = item.items
						this.show = true
					}else {
						this.$u.toast("请设置支付密码")
						setTimeout(()=>{
							uni.navigateTo({
								url: "../person/setup?status=1"
							})
						}, 1000)
					}
				}
			},

			
			// 切换
			tabChange(e){
				console.log(e)
				this.current = e
				this.status = this.tabs[e].status
				this.list = []
				this.pageNum = 1
				this.getList()
			},
			
			
			// 支付订单
			async payOrder(tradePwd){
				this.payPassword = tradePwd
				if(this.loading) return
				if(!this.payPassword) return this.$u.toast("请输入交易密码")
				this.loading = true
				switch(this.oParentid){
					case 1:
						var res = await this.$request("/app-api/pay/order/submit", "POST", {
							id: this.oId,
							channelCode: "wallet1",
							payPassword: this.payPassword
						})
						if(res.code===0 && res.data.status==10) {
							this.loading = false
							this.$u.toast("支付成功")
							this.$store.dispatch("getBalance", this.user.id)
							this.isVerify = false
							this.payPassword = ""
							this.list = []
							this.pageNum = 1
							this.$refs.verify.tradePwd = ""
							this.getList()
						}else{
							this.loading = false
							this.$u.toast(res.msg)
						}
					break;
					case 2:
						if(this.pay===0) {
							var res = await this.$request("/app-api/pay/order/submit", "POST", {
								id: this.oId,
								channelCode: "wallet1",
								payPassword: this.payPassword
							})
							if(res.code===0) {
								this.loading = false
								this.$u.toast("支付成功")
								this.$store.dispatch("getBalance", this.user.id)
								this.isVerify = false
								this.list = []
								this.pageNum = 1
								this.$refs.verify.tradePwd = ""
								this.getList()
							}else{
								this.loading = false
								this.$u.toast(result.msg)
							}
						}else{
							var result = await this.$request("/app-api/pay/order/submit", "POST", {
								id: this.oId,
								channelCode: this.pay===1 ? "zfbapp" : "wxapp",
								displayMode: "app",
								payPassword: this.payPassword
							})
							if(result.code===0) {
								console.log(result)
								this.loading = false
								this.isVerify = false
								this.list = []
								this.pageNum = 1
								this.$refs.verify.tradePwd = ""
								this.getList()
							}else{
								this.loading = false
								this.$u.toast(result.msg)
							}
						}
					break;
					case 3:
						if(this.pay===0) {
							var res = await this.$request("/app-api/pay/order/submit", "POST", {
								id: this.oId,
								channelCode: "wallet1",
								payPassword: this.payPassword
							})
							if(res.code===0) {
								this.loading = false
								this.$u.toast("支付成功")
								this.$store.dispatch("getBalance", this.user.id)
								this.isVerify = false
								this.list = []
								this.pageNum = 1
								this.$refs.verify.tradePwd = ""
								this.getList()
							}else{
								this.loading = false
								this.$u.toast(res.msg)
							}
						}else{
							var result = await this.$request("/app-api/pay/order/submit", "POST", {
								id: this.oId,
								channelCode: this.pay===1 ? "zfbapp" : "wxapp",
								displayMode: "app",
								payPassword: this.payPassword
							})
							
							if(result.code===0) {
								this.loading = false
								console.log(result)
								this.isVerify = false
								this.list = []
								this.pageNum = 1
								this.$refs.verify.tradePwd = ""
								this.getList()
							}else{
								this.loading = false
								this.$u.toast(result.msg)
							}
						}
					break;
					case 4:
						var res = await this.$request("/app-api/pay/order/submit", "POST", {
							id: this.oId,
							channelCode: "wallet2",
							payPassword: this.payPassword
						})
						console.log(res)
						if(res.code===0 && res.data.status==10) {
							this.loading = false
							this.$u.toast("支付成功")
							this.isVerify = false
							this.list = []
							this.$refs.verify.tradePwd = ""
							this.pageNum = 1
							this.getList()
						}else{
							this.loading = false
							this.$u.toast(res.msg)
						}
					break;
				}
				
			},
			
			// 区域切换
			areaChange(e){
				console.log(e)
				this.currentArea = e
				this.areaId = this.tabsArea[e].id
				this.list = []
				this.pageNum = 1
				this.getList()
			},
			
			// 确认收货
			async receiveFun(){
				this.loading = true
				const res = await this.$request("/app-api/trade/order/receive", 'PUT', {
					id: this.oprationId
				}, "application/x-www-form-urlencoded")
				this.loading = false
				if(res.code===0) {
					this.isReceive = false
					this.$u.toast("收货成功") 
					this.pageNum = 1
					this.list = []
					this.getList()
				}else{
					this.$u.toast(res.msg)
				}
			},
			 
			// 取消订单
			async cancelFun(){
				this.loading = true
				const res = await this.$request("/app-api/trade/order/cancel", "DELETE", {
					id: this.oprationId
				}, "application/x-www-form-urlencoded")
				this.loading = false
				if(res.code===0) {
					this.isCancel = false
					this.$u.toast("取消成功")
					this.pageNum = 1
					this.list = []
					this.getList()
				}else{
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.popVue {
		width: 100%;
		padding: 40rpx;
		.picVue {
			width: 130rpx;
			height: 130rpx;	
		}
		.name {
			color: #333;
			font-weight: 600;
			line-height: 1;
		}
		.kg {
			color: #666;
			line-height: 1;
		}
		.price {
			color: #1CC289;
			font-weight: 600;
			line-height: 1;
		}
		.ket {
			line-height: 1;
			color: #333;
			font-weight: 600;
		}
		.li {
			width: 100%;
			height: 100rpx;
			border: 1rpx solid #1CC289;
			border-radius: 14rpx;
		}
		input {
			width: 100%;
			height: 100rpx;
			background: #f5f5f5;
			border-radius: 14rpx;
			box-sizing: border-box;
			padding-left: 20rpx;
			color: #333;
			margin-top: 20rpx;
		}
		.submit {
			width: 690rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 40rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			color: #fff;
			text-align: center;
			font-size: 30rpx;
		}
	}
	.subsectionVue {
		width: 100%;
		height: 160rpx;
		position: fixed;
		left: 0;
		top: calc(var(--status-bar-height) + 92rpx);
		background: #fff;
		z-index: 999;
	}
	.item {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.picVue {
			width: 130rpx;
			height: 130rpx;
			
		}
		.after {
			color: #d81e06;
		}
		.name {
			color: #333;
			font-weight: 600;
			line-height: 1;
		}
		.kg {
			color: #666;
			line-height: 1;
		}
		.price {
			color: #1CC289;
			font-weight: 600;
			line-height: 1;
		}
		.cancelbtn {
			width: 170rpx;
			height: 72rpx;
			border: 1rpx solid #ececec;
			line-height: 72rpx;
			text-align: center;
			border-radius: 30rpx;
			margin-left: 20rpx;
		}
		.btn {
			width: 170rpx;
			height: 72rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			line-height: 72rpx;
			text-align: center;
			border-radius: 30rpx;
			color: #fff; 
			margin-left: 20rpx;
		}
	}
</style>